<template>
  <a-row class="card-nopd-out-container video-beat-container">
    <a-col :span="3" class="tree-box">
      <VideoSide
        ref="videoSideRef"
        @onSelect="onCardSelect"
        :listUrl="url.sideList" 
      />
    </a-col>
    <a-col :span="21" class="table-box pt-20 pr-20">
      <div class="blue-line">{{ $t('video.styleProcessInfo') }}</div>
      <ListDetailsCard v-if="selectCardInfo.styleId" :info="selectCardInfo"/>  
      <a-row class="my-20">
        <a-col :span="10">
          <a-button type="primary" @click="exportVideo" :disabled="!selectedRowKeys.length"> {{ $t('video.exportVideo') }} </a-button>
        </a-col>
        <a-col :span="14">
          <a-form layout="inline" class="flex-right">
            <a-form-item :label="$t('basicData.processVer')+'：' ">
              <a-select v-model:value="versionId" :placeholder="$t('common.pleaseSelect')" @change="loadData(1)">
                <a-select-option :value="-1">{{ $t('common.all') }}</a-select-option>
                <a-select-option v-for="(item, index) in proVersionList" :key="index" :value="item.processVersionId">{{ item.processVersionName }}</a-select-option>
              </a-select>  
            </a-form-item>
            <a-space>
              <a-button type="primary" @click="loadData">{{ $t('common.see') }}</a-button>
              <a-button @click="searchReset">{{ $t('common.reset') }}</a-button>
            </a-space>
          </a-form>
        </a-col>
      </a-row>
      <a-table
        rowKey="dailyRecordId"
        size="small"
        :columns="columns"
        :loading="loading"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
        :scroll="{ y: selectCardInfo.styleId ? 'calc(100vh - 490px)' : 'calc(100vh - 320px)' }"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: checkboxProps, fixed: 'left'}"
      >
        <template #bodyCell="{ column , record }"> 
          <template v-if="column.key === 'best'"> 
            <div v-for="(item, index) in record.bestBeatList" :key="Math.random()+index">
              <span class="text-red ft-size16"><like-filled /></span>
              <u :class="[item.videoStatu  == 1 ? 'text-primary' : item.videoStatu  == 2 ? '' : 'text-gray', 'hover-pointer', 'pl-3', 'pr-10']" @click="onPreview(item, item.videoUrl)" >{{item.name}}</u>
              <span class="table-operate-container">
                <a-button type="link" class="warning-link" @click="handleDelete(item.id)">{{ $t('common.del') }}</a-button >
              </span>
            </div> 
          </template>
          <template v-if="column.key === 'lame'">  
            <div v-for="(item, index)  in record.badBeatList" :key="Math.random()+index">
              <span class="text-gray ft-size16"><dislike-filled /></span> 
              <u :class="[item.videoStatu  == 1 ? 'text-primary' : item.videoStatu  == 2 ? '' : 'text-gray', 'hover-pointer', 'hover-pointer', 'pl-3', 'pr-10']" @click="onPreview(item, item.videoUrl)" >{{item.name}}</u>
              <span class="table-operate-container">
                <a-button type="link" class="warning-link" @click="handleDelete(item.id)">{{ $t('common.del') }}</a-button >
              </span>
            </div> 
          </template>
          <template v-if="column.key === 'operate'">
            <span class="table-operate-container">
              <a-button :disabled="!record.processId || !record.roadMapId" type="link" class="primary-link" @click="chooseBeat(record)">{{ $t('video.selectBeat') }}</a-button > 
            </span>
          </template>
        </template>
      </a-table>
      <operate-modal ref="modalForm" @ok="loadData"/>
      <PreviewVideoModal ref="previewVideoModalRef"/>
    </a-col>
  </a-row>
</template>

<script> 
import { filterObj } from '@/utils'
// import { message } from 'ant-design-vue'
import { DislikeFilled , LikeFilled} from '@ant-design/icons-vue'
import { ListMixinPm } from '@/mixin/listMixinPm.js' 
import {columns} from './modules/config'
import VideoSide from './modules/videoSide'
import ListDetailsCard from './modules/listDetailsCard'
import OperateModal from './modules/operateModal.vue'
import axios from '@/utils/request'
import PreviewVideoModal from './modules/previewVideoModal.vue'
export default {
  name: "videoBeat",
  mixins: [ListMixinPm],
  components: {
    VideoSide,
    ListDetailsCard,
    DislikeFilled,
    LikeFilled,
    OperateModal,
    PreviewVideoModal
  },
  data() {
    return {
      columns,
      url: {
        sideList: '/api/monitor/beat/listStyle',
        list: '/api/monitor/beat/pageProcess',
        delete: '/api/monitor/beat/delete'
      },
      selectCardInfo: {},
      proVersionList: [],
      versionId: -1
    }
  },
  methods: {
    checkboxProps (record) {
      return {
        disabled: !(record.bestBeatList?.length || record.badBeatList?.length)
      }
    },
   async  onCardSelect(val) {
      this.selectCardInfo = val 
      this.versionId = -1 
      await this.getSelectList()
      await this.loadData(1)
    },
    async getSelectList() {
      if(!this.selectCardInfo.styleId) return
      try {
        let res = await axios.postAction('/api/monitor/beat/listProcessVersion', {styleId: this.selectCardInfo.styleId})
        let list = res.success ? res.data || []: []
        this.proVersionList = list.filter(i => i)
      } catch {
        this.proVersionList = []
      }
    },
    searchReset () {
      this.versionId = -1 
      this.loadData(1)
    },
    getQueryParams () { 
      let param = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize 
      }
      if(this.versionId == -1 ) {
        param.processVersionId = null
        param.styleId = this.selectCardInfo.styleId
      } else { 
        param.processVersionId = this.versionId
        param.styleId = null
      } 
      return this.selectCardInfo.styleId ?  (param.processVersionId || param.styleId) ?  filterObj(param) : null : null 
    }, 
    // 选择节拍
    chooseBeat(record) {
      this.$refs.modalForm.open(record)
    },
    onPreview(item, videoUrl) {
      if(item.videoStatu == 3) return
      this.$refs.previewVideoModalRef.open(item.id, videoUrl)
    },
    getAllVideoUrl () {  
      let ary = []
      this.selectionRows.forEach(item => {
        let {bestBeatList, badBeatList} = item
        let badListUrl = badBeatList.filter(i=> i.videoUrl)
        let bestListUrl = bestBeatList.filter(i=> i.videoUrl)
        ary = ary.concat(badListUrl).concat(bestListUrl)
      })
      return ary 
    },
    exportVideo() {
     let urlList =  this.getAllVideoUrl()
     for (let i = 0; i < urlList.length; i++) {
        const iframe = document.createElement('iframe')
        iframe.style.display = 'none' // 防止影响页面
        iframe.style.height = 0 // 防止影响页面
        iframe.src = urlList[i].videoUrl
        document.body.appendChild(iframe) // 这一行必须，iframe挂在到dom树上才会发请求
        // 之后删除
        setTimeout(() => {
          iframe.remove()
        }, 1000) 
     }
    }
  }
   
};
</script>
